<script setup lang="ts">
const props = withDefaults(defineProps<{ duration?: number }>(), {
  duration: 3000,
});
const emit = defineEmits(["closed"]);

const show = ref(true);

onMounted(() => {
  const t = setTimeout(() => {
    show.value = false;
    emit("closed");
    clearTimeout(t);
  }, props.duration);
});
</script>

<template>
  <Mask bg="transparent" v-if="show">
    <div
      class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-black/70 text-white px-6 py-4 rounded-md"
    >
      <slot>提示信息</slot>
    </div>
  </Mask>
</template>
